<template>
  <!-- 遮罩层组件 -->
  <div
    class="wh-full fixed top-0 left-0 z-50 bg-[var(--el-overlay-color-lighter)]"
    v-if="visible"
    :class="maskClass"
    :style="{ zIndex: zIndex }"
    @click="handleClick"
  ></div>
</template>

<script setup>
import { ref } from "vue";

// 定义 props，接收 visible 用于控制遮罩层的显示与隐藏，zIndex 用于控制遮罩层的层级
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  zIndex: {
    type: Number,
    default: 999,
  },
});

// 定义 emits，用于触发关闭遮罩层的事件
const emits = defineEmits(["close"]);

// 处理遮罩层点击事件
const handleClick = () => {
  emits("close");
};
</script>
